<template>
    <div class="body">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="block">
                    <img src="@/assets/img/ratio.png" class="pic" />
                    <div class="num">{{ value[0] }}</div>
                    <div class="title">今日访客申请人数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #aec0d3">
                    <img src="@/assets/img/yes.png" class="pic" />
                    <div class="num">{{ value[1] }}</div>
                    <div class="title">今日已来访人数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #f5b01c">
                    <img src="@/assets/img/no.png" class="pic" />
                    <div class="num">{{ value[2] }}</div>
                    <div class="title">未到访人数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="block" style="background-color: #f02e2e">
                    <img src="@/assets/img/mail.png" class="pic" />
                    <div class="num">{{ value[3] }}</div>
                    <div class="title">访客申请未审核人数</div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>

        <el-row :gutter="20">
            <el-col :span="12">
                <div class="visitors-box">
                    <myTitle title="访客到访_人数变化趋势">
                        <template #right>
                            <div class="visitors-box-right">近30天</div>
                        </template>
                    </myTitle>
                    <div class="chart-container" id="chart-container"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="visitors-box">
                    <myTitle title="访客申请_日人流量统计">
                        <template #right>
                            <div class="visitors-box-right">近30天</div>
                        </template>
                    </myTitle>
                    <div class="chart-container" id="chart-container2"></div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="visitors-box">
                    <myTitle title="访客实际通行人数统计">
                        <template #left>
                            <div class="visitors-box-right">近24小时</div>
                        </template>
                        <!-- <template #right>
              <el-radio-group v-model="floorRadio" size="mini">
                <el-radio-button label="主楼">主楼</el-radio-button>
                <el-radio-button label="副楼">副楼</el-radio-button>
              </el-radio-group>
            </template> -->
                    </myTitle>
                    <div class="chart-container" id="chart-container3"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="visitors-box">
                    <myTitle title="公司访客人数TOP10">
                        <template #right>
                            <div class="visitors-box-right">近30天</div>
                        </template>
                    </myTitle>
                    <div class="chart-container" id="chart-container4"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { visitors, visitorChart } from "@/api/sendhttp/son";
import myTitle from "./components/title.vue";
export default {
    components: {
        myTitle,
    },
    name: "visitors",
    data() {
        return {
            value: [],
            floorRadio: "主楼",
            chartValue: [],
        };
    },
    mounted() {
        for (let i = 1; i <= 4; i++) {
            visitors(i).then((res) => {
                this.value.push(res.data.data.count);
            });
        }

        this.chart();
        this.chart2();
        this.chart3();
        this.chart4();
    },
    methods: {
        chart() {
            let data = [];
            let count = [];
            visitorChart(1).then((res) => {
                for (let i = 0; i < res.data.data.length; i++) {
                    data.push(res.data.data[i].date);
                    count.push(res.data.data[i].count);
                }
                this.initChart1(data, count);
            });

            // setTimeout(() => {
            //     var dom = document.getElementById("chart-container");
            //     var myChart = this.$echarts.init(dom, null, {
            //         renderer: "canvas",
            //         useDirtyRect: false,
            //     });
            //     var option;
            //     option = {
            //         tooltip: {
            //             trigger: "axis",
            //         },
            //         xAxis: {
            //             data: data,
            //         },
            //         yAxis: {
            //             type: "value",
            //         },
            //         series: [
            //             {
            //                 data: count,
            //                 type: "line",
            //                 smooth: true,
            //                 itemStyle: {
            //                     color: "#F5B01C",
            //                 },
            //                 label: {
            //                     show: true,
            //                     position: "top",
            //                     color: "#F5B01C",
            //                 },
            //             },
            //         ],
            //     };
            //     if (option && typeof option === "object") {
            //         myChart.setOption(option);
            //     }
            //     window.addEventListener("resize", myChart.resize);
            // }, 1000);
        },
        initChart1(data, count) {
            var dom = document.getElementById("chart-container");
            var myChart = this.$echarts.init(dom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var option;
            option = {
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: data,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: count,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                            color: "#F5B01C",
                        },
                        label: {
                            show: true,
                            position: "top",
                            color: "#F5B01C",
                        },
                    },
                ],
            };
            if (option && typeof option === "object") {
                myChart.setOption(option);
            }
            window.addEventListener("resize", myChart.resize);
        },
        chart2() {
            let data = [];
            let count = [];
            visitorChart(2).then((res) => {
                for (let i = 0; i < res.data.data.length; i++) {
                    data.push(res.data.data[i].date);
                    count.push(res.data.data[i].count);
                }
            });
            setTimeout(() => {
                var dom = document.getElementById("chart-container2");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};
                var option;
                option = {
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        axisLabel: {
                            show: true,
                            rotate: 40,
                        },
                        data: data,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: count,
                            type: "line",
                            smooth: true,
                            lineStyle: {
                                color: "#F5B01C",
                            },
                            itemStyle: {
                                color: "#F5B01C",
                            },
                            label: {
                                show: true,
                                position: "top",
                                color: "#F5B01C",
                            },
                        },
                    ],
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }
                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
        chart3() {
            let data = [];
            let count = [];
            visitorChart(3).then((res) => {
                for (let i = 0; i < res.data.data.length; i++) {
                    data.push(res.data.data[i].hours);
                    count.push(res.data.data[i].count);
                }
            });
            setTimeout(() => {
                var dom = document.getElementById("chart-container3");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};
                var option;
                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: "category",
                        data: data,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: count,
                            type: "bar",
                            barWidth: "20%",
                            itemStyle: {
                                color: "#F5B01C",
                            },
                            label: {
                                show: true,
                                position: "top",
                                textStyle: {
                                    color: "#F5B01C",
                                },
                            },
                        },
                    ],
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }
                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
        chart4() {
            let data = [];
            let count = [];
            visitorChart(4).then((res) => {
                for (let i = 0; i < res.data.data.length; i++) {
                    if (res.data.data[i].company == null) {
                        data.push("未知");
                    } else {
                        data.push(res.data.data[i].company);
                    }
                    count.push(res.data.data[i].count);
                }
            });
            setTimeout(() => {
                var dom = document.getElementById("chart-container4");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};
                var option;
                option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "value",
                        min: 0,
                        max: 5,
                    },
                    yAxis: {
                        type: "category",
                        data: data,
                    },
                    series: [
                        {
                            name: "2011",
                            type: "bar",
                            barWidth: "15%",
                            itemStyle: {
                                color: "#F5B01C",
                            },
                            label: {
                                show: true,
                                position: "right",
                                textStyle: {
                                    color: "#F5B01C",
                                },
                            },
                            data: count,
                        },
                    ],
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }
                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
    },
};
</script>

<style scoped lang="scss">
.body {
    padding: 20px;
}
.chart-container {
    width: 100%;
    height: 364px;
}
.block {
    width: 100%;
    height: 70px;
    line-height: 20px;
    border-radius: 8px;
    background-color: #56a3ee;
    text-align: center;
    position: relative;
    img {
        width: 30px;
        height: 30px;
    }
}
.pic {
    position: absolute;
    top: 20px;
    left: 3%;
}
.num {
    position: absolute;
    right: 3%;
    top: 20px;
    color: rgba(255, 254, 232, 1);
    font-size: 28px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.visitors-box {
    width: 100%;
    height: 456px;
    border-radius: 8px;
    background-color: rgba(241, 243, 245, 1);
    border: 1px solid rgba(213, 213, 211, 1);
    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        color: #fff;
        background-color: #777777;
        border-color: #777777;
        box-shadow: -1px 0 0 0 #777777;
    }
    .visitors-box-right {
        width: 81px;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(187, 187, 187, 1);
    }
}
.title {
    position: absolute;
    right: 3%;
    top: 45px;
    color: rgba(255, 254, 232, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
</style>
